<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人中心</title>
  <style>
    .text-center {
      text-align: center;
    }

    .user-info-head {
      width: 110px;
      height: 110px;
      line-height: 110px;
      position: relative;
      display: inline-block;
      border-radius: 50%;
      overflow: hidden;
      cursor: pointer;
      margin: 0 auto;
    }

    .list .list-item {
      height: 32px;
      line-height: 32px;
      color: rgb(128, 128, 128);
      padding: 5px 5px 5px 15px;
      border-radius: 4px;
      margin-top: 5px;
    }

    .list .list-item:hover {
      background-color: whitesmoke;
    }

    .list .list-item .title {
      font-size: 13px;
      width: 100%;
    }
  </style>
  {% include 'rbac/common/main-header.html' %}
</head>
<body>
<div style="background-color: whitesmoke;margin: 10px;">
  <div class="layui-row layui-col-space15">
    <!-- 左 -->
    <div class="layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-body" style="padding: 25px;">
          <div class="text-center layui-text">
            <div class="user-info-head" id="userInfoHead">
              <img src="{{ request.user.avatar }}" id="userAvatar" width="115px" height="115px" alt="">
            </div>
            <h2 style="padding-top: 20px;font-size: 20px;">{{ user_obj.nickname }}</h2>
            <p style="padding-top: 8px;margin-top: 10px;font-size: 13px;">China 中国</p>
          </div>
        </div>
        <div style="height: 45px;border-top: 1px whitesmoke solid;text-align: center;line-height: 45px;font-size: 13px;">
          <span>{{ user_obj.sign }}</span>
        </div>
      </div>

      <div class="layui-card">
        <div class="layui-card-header">
          个人信息
        </div>
        <div class="layui-card-body">
          <ul class="list">
            <li class="list-item">
              <span class="title">所属部门</span>
              <span class="layui-badge layui-bg-green">{{ user_obj.department }}</span>
            </li>
            <li class="list-item">
              <span class="title">职位</span>
              <span class="layui-badge layui-bg-green">{{ user_obj.postion }}</span>
            </li>
            <li class="list-item">
              <span class="title">拥有的角色</span>
              {% for item in user_obj.role_list.all %}
                <span class="layui-badge layui-bg-green">{{ item.name }}</span>
              {% endfor %}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 右 选项卡-->
    <div class="layui-col-sm12 layui-col-md9">
      <div class="layui-panel">
        <div style="padding: 20px;">
          <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
              <li class="layui-this">基本信息</li>  <!-- 包含了修改头像 -->
              <li>修改手机号</li>
              <li>修改密码</li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-tab-item layui-show">
                <form
                  class="layui-form"
                  lay-filter="user-info-form"
                  id="user-info-form"
                  action=""
                  style="padding: 15px"
                >
                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">上传头像:</label>
                      <div class="layui-input-block">
                        <div class="layui-btn-container" style="display: flex; justify-content: space-between; align-items: center;">
                          <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-choose">
                            <i class="layui-icon layui-icon-upload"></i> 选择头像并预览!!
                          </button>
                          <button type="button" class="layui-btn" id="ID-upload-demo-action">开始上传</button>
                          <span class="layui-form-mid layui-text-em">
                            <i class="layui-icon layui-icon-tips" lay-tips="若您不点击'开始上传',选择的新头像是不会生效的!!"></i>
                          </span>
                        </div>
                        <div style="width: 132px;">
                          <div class="layui-upload-list">
                            <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">昵称:</label>
                      <div class="layui-input-inline">
                        <input name="nickname" value="{{ user_obj.nickname }}" lay-verify="required" autocomplete="off"
                               placeholder="请输入昵称"
                               class="layui-input"
                               type="text">
                      </div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">用户名:</label>
                      <div class="layui-input-inline">
                        <input name="username" value="{{ user_obj.username }}" lay-verify="required" autocomplete="off"
                               placeholder="请输入用户名"
                               class="layui-input"
                               type="text">
                      </div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">性别:</label>
                      <div class="layui-input-block">
                        <input type="radio" name="gender" value="1" title="男" lay-filter="demo-radio-filter"
                               {% if user_obj.gender == 1 %}checked{% endif %}>
                        <input type="radio" name="gender" value="2" lay-filter="demo-radio-filter" title="女"
                               {% if user_obj.gender == 2 %}checked{% endif %}>
                        <input type="radio" name="gender" value="3" lay-filter="demo-radio-filter" title="保密"
                               {% if user_obj.gender == 3 %}checked{% endif %}>
                      </div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">邮箱:</label>
                      <div class="layui-input-inline">
                        <input name="email" value="{{ user_obj.email }}" lay-verify="required|email" autocomplete="off"
                               placeholder="请输入邮箱"
                               class="layui-input"
                               type="text">
                      </div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">个性签名:</label>
                      <div class="layui-input-inline">
                        <input name="sign" value="{{ user_obj.sign }}" lay-verify="required" autocomplete="off"
                               placeholder="请输入个性签名"
                               class="layui-input"
                               type="text">
                      </div>
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button
                        type="submit"
                        class="layui-btn"
                        lay-submit
                        lay-filter="user-info-form-btn"
                      >
                        立即提交
                      </button>
                      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                  </div>

                </form>
              </div>
              <div class="layui-tab-item">
                <div style="padding:20px">
                  <form class="layui-form" action="">
                    <div class="layui-form-item">
                      <label class="layui-form-label">旧手机号</label>
                      <div class="layui-input-inline layui-input-wrap">
                        <input type="text" name="old_mobile" lay-verify="required|phone" autocomplete="off" lay-affix="clear"
                               class="layui-input">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-inline">
                        <label class="layui-form-label">新手机号</label>
                        <div class="layui-input-inline layui-input-wrap">
                          <input type="tel" name="new_mobile" lay-verify="required|phone" autocomplete="off"
                                 lay-affix="clear" class="layui-input demo-phone">
                        </div>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="user-iphone-from-btn">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
              <div class="layui-tab-item">
                <div style="padding:20px">
                  <form class="layui-form" action="">
                    <div class="layui-form-item">
                      <label class="layui-form-label">旧密码</label>
                      <div class="layui-input-inline layui-input-wrap">
                        <input type="password" name="old_pwd" lay-verify="required|password" autocomplete="off" lay-affix="eye"
                               class="layui-input">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-inline">
                        <label class="layui-form-label">新密码</label>
                        <div class="layui-input-inline layui-input-wrap">
                          <input type="password" name="new_pwd" lay-verify="required|password" autocomplete="off"
                                 lay-affix="eye" class="layui-input">
                        </div>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-inline">
                        <label class="layui-form-label">再输入密码</label>
                        <div class="layui-input-inline layui-input-wrap">
                          <input type="password" name="re_pwd" lay-verify="required|password" autocomplete="off"
                                 lay-affix="eye" class="layui-input">
                        </div>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="user-pwd-from-btn">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% include 'rbac/common/main-footer.html' %}
<script>
  let token = "{{ csrf_token }}";
  solve_csrf(token)

  layui.use(["form", "popup", "upload"], function () {
    let form = layui.form;
    let popup = layui.popup;
    let $ = layui.$;
    let upload = layui.upload;

    // 渲染表单
    form.render();

    // 头像预览以及上传
    let loading;
    let avatar_path = `{{edit_obj.avatar}}`;
    $('#ID-upload-demo-img').attr('src', `{{request.user.avatar}}`); // 设置默认图片链接
    upload.render({
      elem: '#ID-upload-demo-choose',
      url: '/api/v1/user/avatar/', // 此处配置你自己的上传接口即可
      auto: false,
      accept: 'images',
      data: {'id':{{user_obj.id}}, 'type': 'info'},  // ！！！传了id就是修改（用户列表任意改,个人中心只能改自己的）,没传id就是新增 - 在后端进行的判断
      // multiple: true,
      bindAction: '#ID-upload-demo-action',
      // 选择图片后预览
      choose: function (obj) {
        // 预读本地文件示例,不支持ie8
        obj.preview(function (index, file, result) {
          $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
        });
      },
      // 点击向配置的url发送请求!!
      before: function (res) {
        loading = layer.load()
      },
      // 200
      done: function (res) {
        layer.close(loading);
        console.log('done', res)
        if (res.code === 0) {
          avatar_path = res.data.media_path
          popup.success("上传成功!")
        } else {
          popup.failure(res.msg)
        }
      },
      // 除200以外的 比如500
      error: function (index, upload, res, xhr) {
        layer.close(loading);
        popup.failure("上传失败!")
      }
    });

    // 个人中心-用户基本信息 表单提交
    form.on("submit(user-info-form-btn)", function (data) {
      data.field.avatar = avatar_path;
      data.field.id = {{ request.auth }};
      // console.log(data.field)

      let url = "/api/v1/user/info/"
      let d = data.field
      let reload_table = ""
      addAndEditAjaxRequest(popup, url, d, reload_table)
      return false;
    });

    // 个人中心-修改手机号 表单提交
    form.on("submit(user-iphone-from-btn)", function (data) {
      data.field.id = {{ request.auth }};
      let url = "/api/v1/user/iphone/"
      let d = data.field
      let reload_table = ""
      addAndEditAjaxRequest(popup, url, d, reload_table)
      return false;
    });

    // [前端] 自定义验证规则 在submit提交时会自动触发
    form.verify({
      password: function (value) {
        if (value.length < 6) {
          return "密码至少为6位";
        }
        if (value.length > 12) {
          return "密码不能超过10位";
        }
      },
    });

    // 个人中心-修改密码 表单提交
    form.on("submit(user-pwd-from-btn)", function (data) {
      data.field.id = {{ request.auth }};
      let url = "/api/v1/user/pwd/"
      let d = data.field
      let reload_table = ""
      addAndEditAjaxRequest(popup, url, d, reload_table)
      return false;
    });
  })
</script>
</body>
</html>